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2D visual effects 

• Sprites 

• Distorted polygons 

• Particle systems 

• Shader effects 
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2D visual effects 

• Real-time graphics pipeline 

• Effects using normal maps 

• Color adjustments 

• Blur & bloom 

• Putting it all together 
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Tools for building effects 

• Creating assets 

• Previewing effects 

• Using good tools aids experimentation 



2D lighting 
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Graphics pipeline 



Display 
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How effects are rendered 

• Using sprites or polygons 

• Particle systems 

• Motion streak effects 

• Using shaders on the graphics card 

• Pretty much any effect 
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What is a shader? 

• Programs compiled on the graphics card 

• Platform dependent 

• GLSL/ OpenGL 

• Metal shading language 

• HLSL / DirectX 

• C or C++ like language 
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What is a shader? 

• Introduced in OpenGL ES 2 

• Not supported on older hardware 

• Performance varies with graphics card 

• Requires testing on a multitude of devices 
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What is a shader? 

• Vertex shaders 

• Modifies the location of vertices 

• Pixel (fragment) shaders 

• Computes the color of each rendered pixel 

• Can sample the environment 

• Can use multiple textures 
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Normal maps 

"A normal map is an image where the RGB 
components correspond to the X, Y, and Z 
coordinates, respectively, of the surface 
normal." 
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What is a normal? 

A normal is a vector that is perpendicular 
to a given object's surface 
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What is a normal? 

• Any vector in 3D space can be 
decomposed into three components ( x,y,z ) 

•These components can be mapped to the 
RGB values in an image 
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Normal maps 

• A normal map depicts the normals of a 3D 
object as viewed from a specific direction 

• Each pixel's color corresponds to the 
surface normal at that position 
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2D lighting 

• Fast to render on any modern hardware 

• Relatively easy to implement 

•The real problem is the complexity of 
building the normal maps 
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Diffuse map 


Normal map 


Lighted sprite 
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Tweaking lighting 

• Ambient light 

• Base lighting 

• Specular light 

• Highlights or gloss 

• Color & intensity can be modified 

• Custom specular texture maps 
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Ambient 
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Making it look great 

• Requires experimentation 

• Using tools make the process faster 

• Find or make the right tools for you 


GAME DEVELOPERS CONFERENCE* 2015 


MARCH 2-6. 2015 GOCONF.COM 


Creating normal maps 

• Manually drawn 

• Generate in 3D application 

• Build from height map 

• Specific tools 

• Blending normal maps 
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Manually drawn 

• Use the normal sphere to pick colors 

• Good for sharp edges 

• Anti-alias can have unexpected effects 

• Be careful while drawing 

• Be careful while scaling down 
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Generate in 3D application 

• Good, predictable results 

• Easy to setup in 3D program 

• Requires 3D models of your art 
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Build from height map 

• Height maps can be manually drawn 

• Good for details 

• Results may need tweaking 
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Specific tools 

• SpriteLamp 

• Great results for organic shapes 

• Requires a lot of extra art 

• Spritellluminator 

• Drawing program for normal maps 

• Some sprites can be tricky 
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Blending normal maps 

• Simply blending / adding colors won't give 
expected results 

• Special purpose tools available 
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Refraction effects 

• Simulates light breaking through 
transparent materials 

• Uses normal maps in combination with 
environment (refraction) maps 
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Diffuse map 


Normal map 


Refraction 
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Diffuse Environment 
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Environment map 

• Single sprite 

• Fast 

• Cannot render intermediate objects 

• Render texture 

• Slower 

• Can have animations in the environment 
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Reflection effect 

• Much like refraction, but simulates 
reflection 

• Uses normal maps in combination with 
environment (reflection) maps 
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Tips on normal map effects 

• Combine refraction and reflection to 
create glass-like effects 

• Environment maps can be moved or 
rotated to appear more dynamic 

• Effects doesn't need to be perfect to look 
good 
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Color adjustments 

• Reduce number of assets 

• Highlight game elements 

• Improve animations 
•Transitions 


GAME DEVELOPERS CONFERENCE* 2015 


MARCH 2-6. 2015 GOCONF.COM 


Color adjustments 

• Saturation 

• Contrast 

• Brightness 

• Hue 
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Color adjustments 

• Saturation, Contrast & Brightness can all 
be done in the RGB color space 

• Shifting the hue requires conversions 
between color spaces 
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Shifting hue 

• Converting to HSV is slow 

• Hue shift can be approximated in YIQ 
color space 

• Shifting hue using YIQ is twice as fast, but 
not perfect 
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YIQ colorspace 

• Used by NTSC color TV system 

• Luma, in-phase & quadrature 

• Conversion to/from RGB is done by a 
simple matrix multiplication 

• Can shift the hue by rotating around the 
luma axis 
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HSV 

Preserves saturation 



YIQ 

Preserves luminance 
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Reducing number of assets 

• Color sprites or part of sprites, instead of 
adding more textures saves memory 

• Can impact performance 

• Color adjustments are slower to render than 
plain sprites 

•Adding different shaders break sprite batching 
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Blur & bloom 

• Blur 

• Bloom 

• Drop shadow 

• Glow 
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Blur 

• Doing correct blurs are very expensive 

• Can be simplified with multiple render 
passes 

• Different implementations are faster on 
different devices 
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Blur optimizations 

• Use pre-rendered images 

• Dissolve/blend between can simulate dynamic 
results 

• Buffer the results in a render texture 

• Useful when the blurred areas are not 
dynamic 


GAME DEVELOPERS CONFERENCE* 2015 


MARCH 2-6. 2015 GOCONF.COM 


Bloom 

• Feathers of light extending from brightly 
lit areas 

• Created by combining blur with filtering 

• Expensive to render 
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Putting it all together 

•Tweaking performance 
• Combining effects 
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Good toolsets for effects 

• Allows visual exploration 

• Makes it easier to tweak performance 

• Minimizes number of iterations 

• Can be used by designers 
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Tweaking performance 

• Processing power varies greatly among 
mobile devices 

• Not all effects are essential for game-play 

• Blur, bloom, refraction & reflection are 
particularly expensive 
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Test performance 

• Determine device type 

•Thousands of devices 

• Render graphics offscreen 

• May not reflect speed perfectly 
•Takes time 
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Test performance 

• Load assets before test 

• Start with basics, add in more effects 

• Measure frame rate 

• Can be done in about one second 
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Demo 
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Mentioned tools 

• SpriteBuilder 

• CrazyBump 

• Normal Mixer 

• Sprite Lamp 

• Spritellluminator 
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More info and resources 

viktorious.com/gdc 

• Slides from presentation 

• Links to all tools 

• Links to more tutorials 


@viktorlidholt 


